<template>
    <div class="chat_container">
        <div class="tabs">
            <div v-for="(item, index) in navList" :key="index" @click="navClick(item)"
                :class="navIndex == item.label ? 'tabs_items_active' : 'tabs_items'">
                {{ item.label }}
            </div>
        </div>
        <div class="chat_contents" v-if="tabs" v-loading="oneloading">
            <div class="zanwu" v-if="onelist.length == 0">暂无数据</div>
            <div class="chat_contents_items" v-for="(item, index) in onelist" :key="index" @click="itemsClick(item)">
                <img class="chat_contents_items_img" :src="item.imageList[0]" alt="">
                <div class="chat_contents_title">
                    {{ item.content }}
                </div>
                <div class="chat_contents_bottom">
                    <img :src="item.avatarImage" alt="">
                    <div class="chat_contents_nickName">{{ item.nickName }}</div>
                    <div class="chat_contents_date">{{ item.createTime }}</div>
                </div>
            </div>
            <div class="xiala" v-if="oneTotal > 12 && onequeryParams.pageNum * onequeryParams.pageSize < oneTotal">
                <img src="@/assets/下拉@2x.png" alt="" @click="pageClick()">
            </div>
        </div>
        <div class="chat_content" v-if="!tabs">
            <div class="left">
                <template v-if="Object.keys(activeDatas).length > 0">
                    <img class="avatar" :src="activeDatas.avatarImage" alt="">
                    <div class="left_con">
                        <div class="name">{{ activeDatas.nickName }}</div>
                        <div class="titles">{{ activeDatas.content }}</div>
                        <div class="imags">
                            <img :src="item" alt="" v-for="(item, index) in activeDatas.imageList" :key="index">
                        </div>
                        <div class="datas">
                            <div class="createTime">{{ activeDatas.createTime }}</div>
                            <div class="dianzan">{{ activeDatas.hits || 0 }}</div>
                        </div>
                        <div class="shezhi">
                            <div class="lefts">
                                <img v-for="(it, ins) in activeDatas.touxiang" :key="ins"
                                    :class="ins == 0 ? 'image' : 'imags'" :src="it" alt="">
                                </img>
                            </div>
                            <div class="rights">
                                <div class="hits">{{ activeDatas.replies?.length }}</div>
                                <img src="@/assets/聊天@2x.png" alt="" class="chat_image"
                                    @click="huifu(activeDatas.nickName, activeDatas, 0)">
                                <div class="heart" @click="shoucang(activeDatas)">
                                    <img src="@/assets/heart.png" v-if="activeDatas.collectStatus == '0'"></img>
                                    <img src="@/assets/heart-fill.png" v-if="activeDatas.collectStatus == 1"></img>
                                </div>
                            </div>
                        </div>

                        <div class="huifu_people">
                            <div class="huifu_people_items" v-for="(it, inx) in activeDatas.replies" :key="inx"
                                @click="huifu(it.nickName, activeDatas, it.id)">
                                <div>{{ it.nickName }}:</div>
                                <div class="huifu_contentss">{{ it.replyContent }}</div>
                            </div>
                        </div>


                    </div>
                </template>
            </div>
            <div class="right">
                <div class="title">相关圈子</div>
                <div class="line"></div>
                <div class="content" v-loading="loading">
                    <div class="items" v-for="(item, index) in list" :key="index" @click="itemsClick(item)">
                        <img :src="item.imageList[0]" alt="" class="imgs">
                        <div class="items_right">
                            <div class="items_title">
                                {{ item.content }}
                            </div>
                            <div class="items_bottom">
                                <div class="items_date">{{ item.createTime }}</div>
                                <div class="items_date">{{ item.hits || 0 }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="zanwu" v-if="list.length == 0">暂无数据</div>
                </div>
                <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" /> -->
            </div>
        </div>

        <el-dialog ref="formDialogRef" :title="'回复 @' + activeName" v-model="activeShow" width="600px" append-to-body
            @close="closeDialog">
            <el-input v-model="contents" type="textarea" placeholder="请输入内容"></el-input>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submits">回 复</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getCircleByUserId, circleList, collectDelete, collectAdd, addCircleReply, circleId } from '@/api/index'
const navList = ref([])
const navIndex = ref('全部')
const queryParams = ref({
    pageNum: 1, pageSize: 10, type: ''
})
const onequeryParams = ref({
    pageNum: 1, pageSize: 12, type: ''
})
const total = ref(0)
const list = ref([])
const loading = ref(false)
const activeDatas = ref<any>({})
const tabs = ref(true)
const navClick = (item) => {
    tabs.value = true
    navIndex.value = item.label
    if (item.label == '全部') {
        queryParams.value.type = ''
        onequeryParams.value.type = ''
    } else {
        queryParams.value.type = item.label
        onequeryParams.value.type = item.label
    }
    activeDatas.value = {}
    queryParams.value.pageNum = 1
    onequeryParams.value.pageNum = 1
    getList()
    getOneList()
}
const oneloading = ref(false)
const onelist = ref([])
const oneTotal = ref(0)

const activeShow = ref(false)
// 回复人
const activeName = ref('')
//回复内容
const contents = ref('')
// 选中圈子内容
const activeData = ref<any>({})
// 当前评论id
const parentId = ref('')

// 回复提交
const submits = async () => {
    if (contents.value) {
        await addCircleReply({
            circleId: activeData.value.id,
            parentId: parentId.value,
            replyContent: contents.value
        })
        ElMessage.success('回复成功')
        activeShow.value = false
        contents.value = ''
        const indexs = list.value.findIndex((item) => item.id == activeData.value.id)
        const res = await circleId(activeData.value.id)
        list.value[indexs].replies = res.data.replies
    } else {
        ElMessage.error('请输入回复内容')
    }
}
// 关闭回复
const closeDialog = () => {
    activeShow.value = false
    activeName.value = ''
    contents.value = ''
    parentId.value = ''
}
// 回复
const huifu = (name, item, id) => {
    activeShow.value = true
    if (name.includes('@')) {
        activeName.value = name.split('@')[0]
    } else {
        activeName.value = name
    }
    activeData.value = item
    parentId.value = id
}
// 收藏
const shoucang = async (item) => {
    if (item.collectStatus == 1) {
        await collectDelete({
            id: item.id
        })
    } else {
        await collectAdd({
            businessType: item.type,
            businessId: item.id
        })
    }
    ElMessage.success(item.collectStatus == 1 ? "取消收藏成功" : '收藏成功');
    item.collectStatus = item.collectStatus == 1 ? '0' : '1'
}
// 右侧点击
const itemsClick = (item) => {
    tabs.value = false
    activeDatas.value = item
}
// 获取头部
const getNavlist = async () => {
    const res = await getCircleByUserId({})
    const navLists = []
    navLists.push({
        label: '全部',
        value: '',
    },)
    res.msg.split(',').forEach((element, index) => {
        navLists.push({
            label: element,
            value: element
        })
    });
    navList.value = navLists
}

// 一页十条 圈子
const getList = async () => {
    loading.value = true
    const res = await circleList(queryParams.value)
    res.rows.forEach(element => {
        element.createTime = element.createTime.split(' ')[0].replace(/-/g, "/")
        element.avatarImage = import.meta.env.VITE_APP_PIC_URL + '/' + element.avatarImage
        const imageList = []
        const image = element.image.split(',')
        image.forEach((item) => {
            imageList.push(import.meta.env.VITE_APP_PIC_URL + item)
        })
        element.imageList = imageList

        const touxiang = []
        if (element.replies) {
            element.replies.forEach((item) => {
                touxiang.push(import.meta.env.VITE_APP_PIC_URL + '/' + item.avatarImage)
            })
        }
        element.touxiang = touxiang.splice(0, 5)
    });
    total.value = res.total
    list.value = res.rows
    loading.value = false
}


// 一页十二条 圈子
const getOneList = async () => {
    oneloading.value = true
    const res = await circleList(onequeryParams.value)
    res.rows.forEach(element => {
        element.createTime = element.createTime.split(' ')[0].replace(/-/g, ".")
        element.avatarImage = import.meta.env.VITE_APP_PIC_URL + '/' + element.avatarImage
        const imageList = []
        const image = element.image.split(',')
        image.forEach((item) => {
            imageList.push(import.meta.env.VITE_APP_PIC_URL + item)
        })
        element.imageList = imageList

        const touxiang = []
        if (element.replies) {
            element.replies.forEach((item) => {
                touxiang.push(import.meta.env.VITE_APP_PIC_URL + '/' + item.avatarImage)
            })
        }
        element.touxiang = touxiang.splice(0, 5)
    });
    oneTotal.value = res.total
    onelist.value = res.rows
    oneloading.value = false
}

// 首页分页
const pageClick = () => {
    onequeryParams.value.pageNum++
    getOneList()
}


onMounted(async () => {
    getNavlist()
    getList()
    getOneList()
});

</script>

<style scoped lang="scss">
:deep(.el-textarea__inner) {
    min-height: 160px !important;
}

.chat_container {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f5f7fa;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    overflow: auto;
    box-sizing: content-box;
    padding-top: 100px;



    .tabs {
        width: 1400px;
        margin-bottom: 20px;
        margin-left: 20px;
        margin-top: 20px;
        display: flex;
        align-items: center;

        .tabs_items {
            margin-right: 30px;
            color: #A0A0A0;
            font-size: 16px;
            cursor: pointer;
        }

        .tabs_items_active {
            margin-right: 30px;
            color: #000000;
            font-size: 18px;
            cursor: pointer;
        }
    }

    .chat_contents {
        width: 1400px;
        background: #FFFFFF;
        box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.09);
        border-radius: 20px;
        box-sizing: border-box;
        padding: 40px 50px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: auto;

        .zanwu {
            width: 100%;
            line-height: 981px;
            text-align: center;
            color: #A0A0A0;
        }

        .xiala {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;

            img {
                width: 28px;
                height: 28px;
                cursor: pointer;
            }
        }

        .chat_contents_items {
            width: calc(100% / 6);
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            .chat_contents_items_img {
                width: 194px;
                height: 284px;
                border-radius: 10px;
            }

            .chat_contents_title {
                font-family: Adobe Heiti Std;
                font-weight: normal;
                font-size: 14px;
                color: #000000;
                width: 194px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 20px;
                height: 40px;
            }

            .chat_contents_bottom {
                display: flex;
                align-items: center;
                width: 194px;
                justify-content: space-between;
                margin-top: 10px;
                margin-bottom: 30px;

                img {
                    width: 23px;
                    height: 23px;
                    border-radius: 50%;
                }

                .chat_contents_nickName {
                    font-size: 14px;
                    color: #000000;
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding: 0 10px;
                }

                .chat_contents_date {
                    font-size: 12px;
                    color: #959595;
                }
            }

        }
    }

    .chat_content {
        width: 1400px;
        background: #FFFFFF;
        box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.09);
        border-radius: 20px;
        box-sizing: border-box;
        padding: 48px 60px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;

        .left {
            width: 55%;
            height: 100%;
            display: flex;
            box-sizing: border-box;
            padding-right: 120px;

            .avatar {
                width: 76px;
                height: 76px;
                border-radius: 50%;
                margin-right: 15px
            }

            .left_con {
                flex: 1;
                overflow: auto;

                .name {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #000000;
                }

                .titles {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #000000;
                    margin-top: 15px;
                }

                .imags {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    img {
                        border-radius: 10px 10px 10px 10px;
                        ;
                        width: 119px;
                        height: 92px;
                        margin-right: 5px;
                        margin-top: 10px;
                    }
                }

                .datas {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    color: #969696;
                    margin-top: 30px;
                }

                .shezhi {
                    margin-top: 10px;
                    font-size: 20px;
                    color: rgb(179, 173, 173);
                    display: flex;
                    width: 100%;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 15px;

                    .shezhi_flex {
                        display: flex;
                        align-items: center;

                        .heart {
                            margin-left: 20px;
                        }
                    }

                    .lefts {
                        display: flex;
                        align-items: center;

                        .image {
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                        }

                        .imags {
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            margin-left: -12px;
                        }
                    }

                    .rights {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 12px;
                        color: #969696;

                        .hits {
                            margin-right: 10px;

                        }

                        .chat_image {
                            width: 16px;
                            height: 16px;
                            cursor: pointer;
                        }

                        .heart {
                            margin-left: 10px;

                            img {
                                width: 20px;
                                height: 20px;
                                cursor: pointer;
                                margin-top: 1px;
                            }
                        }
                    }

                    .dian {
                        color: #000;
                        margin-left: 20px;
                    }
                }

                .huifu_people {
                    margin-top: 10px;
                    width: 100%;

                    .huifu_people_items {
                        display: flex;
                        margin-bottom: 15px;
                        align-items: center;
                        font-size: 14px;

                        .huifu_contentss {
                            color: rgb(179, 173, 173);
                            font-size: 14px;
                            margin-left: 10px;
                        }
                    }
                }
            }

        }

        .right {
            width: 45%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            align-content: flex-start;

            .title {
                font-weight: 300;
                font-size: 24px;
                color: #000000;
                line-height: 48px;
            }

            .line {
                width: 100%;
                height: 1px;
                opacity: 0.2;
                background-color: grey;
                margin-top: 10px;
            }

            .content {
                width: 100%;
                height: calc(100% - 131px);
                overflow: auto;

                .zanwu {
                    width: 100%;
                    text-align: center;
                    margin-top: 100px;
                    color: #A0A0A0;
                    font-size: 16px;
                    cursor: pointer;
                }

                .items {
                    width: 90%;
                    margin-left: 5%;
                    padding: 28px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    border-bottom: 1px solid #eeee;

                    .imgs {
                        width: 83px;
                        height: 64px;
                        border-radius: 7px 7px 7px 7px;
                    }

                    .items_right {
                        width: calc(100% - 103px);
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        align-content: space-between;
                        height: 64px;

                        .items_title {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 17px;
                            color: #000000;
                            display: -webkit-box;
                            /* 将对象作为弹性伸缩盒子模型显示 */
                            -webkit-box-orient: vertical;
                            /* 设置或检索伸缩盒对象的子元素的排列方式 */
                            -webkit-line-clamp: 2;
                            /* 限制在一个块元素显示的文本的行数 */
                            overflow: hidden;
                            /* 隐藏溢出的内容 */
                        }
                    }

                    .items_bottom {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .items_date {
                            font-weight: 400;
                            font-size: 14px;
                            color: #969696;
                        }
                    }
                }
            }

        }
    }
}
</style>